<template>
  <div class="container">
    <el-card class="box-card">
      <div class="info" @click="goChat">
        <el-avatar shape="square" :src="house.user_owner_image" />
        <span class="info-txt">{{ house.user_owner_name }}</span>
      </div>
      <div>
        <!-- <el-date-picker v-model="dateValue" type="daterange" range-separator="To" start-placeholder="Start date"
          end-placeholder="End date" :size="size" /> -->
      </div>
      <div class="demo-image__preview">
        <el-image
          style="width: 300px; height: 300px"
          :src="house?.image"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[house?.image]"
          :initial-index="4"
          fit="cover"
        />
      </div>
      <div class="bottom">
        <el-space wrap>
          <el-tag type="primary">价格: {{ house.rmb }}</el-tag>
          <el-tag type="success">状态: {{ formatStatus(house.state) }}</el-tag>
          <el-tag type="warning">数量: {{ house.number }}</el-tag>
        </el-space>
        <div class="submit">
          <el-button type="primary" size="small" @click="() => submit()">提交订单</el-button>
        </div>
      </div>
    </el-card>

    <!-- <el-card class="card-comment">
      <div class="comment">
        评论
      </div>
    </el-card> -->
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getHouseList, getHouse } from '/@/api/house/house.ts'
  import { insertOrder } from '/@/api/order/order.ts'
  import { useRouter } from 'vue-router'
  import { createLocalStorage } from '/@/utils/cache'
  import { LOCALE_KEY } from '/@/enums/cacheEnum'
  import { useMultipleTabStore } from '/@/store/modules/multipleTab'

  const tabStore = useMultipleTabStore()
  const { currentRoute, push } = useRouter()
  const router = useRouter()
  const dateValue = ref('')
  const house = ref('')
  const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
  const srcList = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  ]
  onMounted(() => {
    getData()
  })
  const getData = () => {
    const id = currentRoute.value.query.houseId
    getHouse(id).then((res) => {
      console.log(currentRoute)
      const data1 = res.msg
      house.value = data1
    })
  }

  const goChat = () => {
    const user_owner_id = house.value.user_owner_id
    const houseId = house.value.id
    push(`/chat/index?chatUserId=${user_owner_id}&house_id=${houseId}`)
  }
  const formatStatus = (value) => {
    if (value == 0) {
      return '未使用'
    }
    if (value == 2) {
      return '已使用'
    }
    if (value == 3) {
      return '已退单'
    }
    if (value == 1) {
      return '使用中'
    }
  }

  const submit = () => {
    const ls = createLocalStorage()
    const userInfo = ls.get(LOCALE_KEY + 'bb_user_info')
    const { start_time, end_time } = currentRoute.value.query
    const data = [
      {
        user_id: userInfo.uid,
        start_time: start_time,
        end_time: end_time,
        house_id: house.value.id,
      },
    ]
    insertOrder(data).then((res) => {
      if (!res.state) {
        ElMessage({
          message: '提交失败',
          type: 'success',
        })
        return
      }

      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      push(`/piazza/index`)
      const targetKey = currentRoute.value.fullPath || currentRoute.value.path
      tabStore.closeTabByKey(targetKey, router)
      setTimeout(()=>{
        location.reload()
      },2000)
    })
  }
</script>

<style lang="scss" scoped>
  .demo-image__preview {
    display: flex;
    justify-content: center;
  }

  .demo-image__error .image-slot {
    font-size: 30px;
  }

  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }

  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }

  .bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 6px;
  }

  .price {
    margin: 10px;
  }
  .number {
    margin: 0 10px 10px;
  }
  .submit {
    display: flex;
    justify-content: flex-end;
  }
  .card-comment {
    margin-top: 10px;
  }
  .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
  }
  .info-txt {
    margin-left: 4px;
  }
</style>